import React, { useEffect, useState } from 'react'

import { Avatar } from 'antd-mobile'
import { Flex } from 'antd'


import styles from './index.module.css'



function ClientChat(props) {

    const url = 'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ';

    //[]空数组相当于componentDidMount
    useEffect(() => {

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    return (
        <div >
            <Flex style={{ 'width': '95vw' }} justify={'flex-end'} align={'center'}>
                <span style={{ 'color': '#000000A6' }}>{props.content}</span>
                <Avatar style={{ 'marginLeft': '10px', 'marginRight': '10px', '--size': '32px' }} src={url} />
            </Flex>
        </div>

    )
}

export default ClientChat;
